import React, {Component} from "react";
import {Menu} from "antd";
import {Link} from "react-router-dom";
import {Layout} from 'antd';
import {authRouter, IRouter} from "../router";
const {Sider} = Layout;
const {SubMenu} = Menu;

export class LeftBar extends Component<{ collapsed: boolean }> {
    generateMenu = (routerList:IRouter[])   => {
        return  routerList.map(x=>{
            if (x.children) { //如果有子路由的话
                return <SubMenu key={x.path} title={x.title} icon={x.icon}>
                    {this.generateMenu(x.children)}
                </SubMenu>
            }
            return <Menu.Item key={x.path} icon={x.icon}>
                <Link to={x.path}>{x.title}</Link>
            </Menu.Item>;
        })

    }
    render() {
        return <Sider trigger={null} collapsible collapsed={this.props.collapsed}>
            <div className="logo"/>
            <Menu theme={'dark'} mode="inline" defaultSelectedKeys={["1"]}>
                {this.generateMenu(authRouter)}
            </Menu>
        </Sider>;
    }
}
